<!--
 * @Description: 我的需求
 * @Author: Kerwin
 * @Date: 2024-09-04 17:21:25
 * @LastEditTime: 2025-02-24 11:48:22
 * @LastEditors:  Please set LastEditors
-->

<template>
    <view class="container">
        <u-navbar :title="'我的需求'" title-color="#000" :border-bottom="false" back-icon-color="#000">
        </u-navbar>
        <u-waterfall v-model="flowList" ref="uWaterfallRef">
            <template v-slot:left="{ leftList }">
                <view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="toDetail(item.id)">
                    <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
                    <u-lazy-load threshold="-450" border-radius="10" :image="item.previewImage"
                        :index="index"></u-lazy-load>
                    <view class="demo-title">
                        {{ item.name }}
                    </view>
                    <view class="demo-tag">
                        <view class="demo-tag-text">
                            <text v-for="tag in item.tags">#{{ tag }}</text>
                        </view>
                        <view class="demo-tag-views" v-if="item.favoriteCount">
                            <u-icon :name="icon_views" color="#666" size="40"></u-icon>
                            <text style="margin-left: 8rpx;">{{ item.favoriteCount }}</text>
                        </view>
                    </view>
                </view>
            </template>
            <template v-slot:right="{ rightList }">
                <view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="toDetail(item.id)">
                    <u-lazy-load threshold="-450" border-radius="10" :image="item.previewImage"
                        :index="index"></u-lazy-load>
                    <view class="demo-title" v-html="item.name || item.content"></view>
                    <view class="demo-tag">
                        <view class="demo-tag-text">
                            <text v-for="tag in item.tags" v-html="`${tag}`"></text>
                        </view>
                        <view class="demo-tag-views" v-if="item.favoriteCount">
                            <u-icon :name="icon_views" color="#666" size="40"></u-icon>
                            <text style="margin-left: 8rpx;">{{ item.favoriteCount }}</text>
                        </view>
                    </view>
                </view>
            </template>
        </u-waterfall>
        <u-loadmore color="#ccc" style="margin-top: 30rpx" :status="loadStatus" @loadmore="getData"></u-loadmore>
    </view>
</template>

<script lang="ts" setup>
import { onReachBottom, onLoad, onPageScroll } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import icon_views from "@/packageD/static/img/views.svg"
import { route, timeDetia } from '@/utils/common';
import { socialApi } from '@/api';
import { getImgFullPath } from '@/utils';
import { useUserStore } from '@/store';

const userStore = useUserStore()
interface Item {
    id?: string;
    price: number;
    title: string;
    image: string;
    shop: string;
}
const flowList = ref<Item[]>([])

const uWaterfallRef = ref()
const loadStatus = ref('loading')
function toDetail(id: any) {
    route({
        url: '/packageD/pages/demand/detail',
        params: {
            id,
        },
    })
}
const pageData = reactive({
    pageSize: 10,
    pageIndex: 1,
    finished: false,
})
async function getData() {
    if (pageData.finished) return
    loadStatus.value = 'loading';
    const { data } = await socialApi.dynamicList({
        ...pageData,
        type: 4,
        userId: userStore?.userInfo?.id,
        detail: true
    })
    const { records, pages, current } = data
    const arr = formatData(records)
    flowList.value.push(...arr)
    if (current < pages) {
        pageData.pageIndex = current + 1
        loadStatus.value = 'loadmore';
    } else {
        pageData.finished = true
        loadStatus.value = 'nomore'
    }
}
interface Dynamic {
    id: number
    userId: number
    videoUrl: string
    contentType: number
    type: number
    content: string
    previewImage?: string
    tags?: string
    user: {
        nickname: string
        username: string
        avatar: string
    }
    createTime: number | string
    files: string[]
    location: any
}
function formatData(arr: Dynamic[]) {
    arr.forEach(item => {
        item.files = item.videoUrl.split(',').map(url => getImgFullPath(url) || '')
        item.previewImage && (item.previewImage = getImgFullPath(item.previewImage) || '')
        item.createTime = timeDetia(item.createTime as number * 1000)
        if (item.tags && typeof item.tags === 'string' && item.tags.startsWith('[') && item.tags.endsWith(']')) {
            item.tags && (item.tags = JSON.parse(item.tags))
        }
    })
    return arr
}

onLoad(() => {
    getData()
})
onReachBottom(async () => {
    try {
        await getData()
    } catch (error) {
        console.log(error)
    }
})
</script>

<style lang="scss" scoped>
.container {
    // background: #fff;
    padding-bottom: 30rpx;
}

.demo-warter {
    border-radius: 8px;
    margin: 5px;
    background-color: #ffffff;
    padding: 8px;
    position: relative;
}

.u-close {
    position: absolute;
    top: 32rpx;
    right: 32rpx;
}

.demo-image {
    width: 100%;
    border-radius: 4px;
}

.demo-title {
    font-size: 30rpx;
    margin-top: 5px;
    color: $u-main-color;
}

.demo-tag {
    display: flex;
    margin-top: 16rpx;
    justify-content: space-between;
    align-items: center;
    color: #999999;

    .demo-tag-text {
        font-size: 24rpx;
    }

    .demo-tag-views {
        display: flex;
        align-items: center;
    }
}
</style>